<template>
  <div class="allsearch">
    <section class="search-content">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="22">
          <el-input v-model="cardId" style="width:200px" placeholder="卡号" @keyup.enter.native="handleFilter"/>
          <el-date-picker
            v-model="cycle"
            :picker-options="picker"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="|"
            start-placeholder="起始有效期"
            end-placeholder="结束有效期"
            style="width:350px;"
            @change="handleFilter"
          />
          <el-input v-model="batchId" placeholder="批次id" style="width:150px;" @keyup.enter.native="handleFilter"/>
          <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
          <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        </el-col>
      </el-row>
    </section>
    <subtable
      :table-label="usedCardLabel"
      :table-data="usedCardData"
    >
      <el-table-column slot="first" label="卡号(账号)" align="center" min-width="30">
        <template slot-scope="scope">
          <span>{{ scope.row.cardId }}</span>
        </template>
      </el-table-column>
      <el-table-column slot="second" label="密码" align="center" min-width="10">
        <template slot-scope="scope">
          <el-button type="text" @click="handlePasswordDialog(scope)">查看密码</el-button>
        </template>
      </el-table-column>

      <el-table-column slot="button" :min-width="10" label="操作" prop="manage" align="center">
        <template slot-scope="scope">
          <el-dropdown
            split-button
            trigger="click"
            type="primary"
            @click="deleteCard(scope.row)"
            @command="handleCommand($event, scope.row)"
          >
            删除
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="scope.row.batchStatus === 'abolish'" command="1">启用</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.batchStatus === 'normal'" command="2">作废</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </subtable>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <!-- 查看密码 -->
    <el-dialog :visible.sync="codeDialog" title="查看密码" width="580px">
      <h3>{{ password }}</h3>
      <div slot="footer" class="dialog-footer">
        <el-button @click="codeDialog = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Subtable from '@/components/Eltable'
import Pagination from '@/components/Pagination' // 分页组件
import { getUsedCardList, deleteCard, updateCard } from '@/api/operate/learnCard' // 接口
import { getTenantId } from '@/utils/auth'
export default {
  components: {
    Subtable,
    Pagination
  },
  props: {
    singleUsedCard: {
      type: Array,
      default() { return [] }
    }
  },
  data() {
    return {
      codeDialog: false,
      password: '',
      total: 0,
      currentpage: 1,
      pagesize: 10,
      usedCardLabel: [
        {
          label: '有效期', width: '10', prop: 'endTimeTimeStr'
        }, {
          label: '批次', width: '20', prop: 'batchName'
        }, {
          label: '状态', width: '10', prop: 'batchStatusStr'
        }
      ],
      usedCardData: [],
      listFilter: [],
      cardId: '',
      cycle: [],
      batchId: '',
      picker: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handlePasswordDialog(scope) {
      this.codeDialog = true
      this.password = scope.row.cardPassword
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
      this.getData()
    },
    handleFilter() {
      this.getData()
    },
    clearParams() {
      this.cycle = []
      this.cardId = ''
      this.batchId = ''
      this.getData()
    },
    getData() {
      this.listLoading = true
      const params = {}
      params.page = this.currentpage
      params.pageSize = this.pagesize
      params.cardId = this.cardId
      if (this.cycle) {
        params.startDate = this.cycle[0]
        params.endDate = this.cycle[1]
      }
      params.batchId = this.batchId
      params.tenantId = getTenantId()
      getUsedCardList(params).then(response => {
        this.usedCardData = response.data.items
        this.convert(this.usedCardData)
        if (this.singleUsedCard.length) {
          this.convert(this.singleUsedCard)
          this.usedCardData = Object.assign([], this.singleUsedCard)
        }
        this.total = response.data.total
      })
    },
    convert(items) {
      items.map(item => {
        if (item.batchStatus === 'normal') item.batchStatusStr = '正常'
        if (item.batchStatus === 'abolish') item.batchStatusStr = '作废'
      })
    },
    deleteCard(row) {
      this.$confirm('真的要删除该充值卡吗？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCard(row.id).then(res => {
          this.$notify({
            title: '成功',
            message: '充值卡已删除！',
            type: 'success',
            duration: 2000
          })
          this.getData()
        })
      }).catch(() => {
        this.$message.info('取消')
      })
    },
    handleCommand(command, row) {
      if (command === '1') {
        row.batchStatus = 'normal'
        this.updateCard(row, '启用')
      } else if (command === '2') {
        row.batchStatus = 'abolish'
        this.updateCard(row, '作废')
      }
    },
    updateCard(row, event) {
      updateCard(row).then(() => {
        this.$notify({
          title: '成功',
          message: `学习卡已${event}`,
          type: 'success',
          duration: 2000
        })
        this.getData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.allsearch {
  margin-top: 0px;
  padding: 0;
  .search-content {
    width: 100%;
  }
}
</style>
